<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="关键字">
          <el-input v-model="name" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="addRole()">新增</el-button>
      </el-form>
    </div>
    <div class="detail">
      <com-table :data="dataList" :columns="columns" :total="total" @pageChange="pageChange">
        <template v-slot:name="{row}">
          <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
        </template>
        <template v-slot:options="{row}">
          <el-button type="success" icon="el-icon-edit-outline" size="mini" @click="editPerssion(row)">权限</el-button>
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editRole(row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="delRole(row)">删除</el-button>
        </template>
      </com-table>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="角色信息"
      :visible.sync="showModal"
      width="500px"
      center
      @close="cancel"
    >
      <el-form ref="roleForm" :rules="rules" style="padding-top: 10px;" :model="roleData" label-width="110px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleData.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="roleData.description" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="saveRole">确 定</el-button>
      </span>
    </el-dialog>
    <editRoleMenu :show-modal.sync="showEditPermissions" :data="unitDetail" />
  </div>
</template>

<script>
import { addUserRole, deleteUserRole, getUserRoleList, updateRole } from '@/api/permissionManage'
import editRoleMenu from './editRoleMenu'
export default {
  name: 'BuildUnit',
  components: {
    editRoleMenu
  },
  data() {
    return {
      name: '',
      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showModal: false,
      optType: 'add',
      showEditPermissions: false,
      roleData: {
        name: '',
        description: ''
      },
      loading: false,
      rules: {
        name: {
          required: true, message: '请输入角色名称', trigger: 'change'
        }
      },
      unitDetail: {},
      columns: [
        // {
        //   label: '编号',
        //   prop: 'number'
        // },
        {
          label: '角色名称',
          prop: 'name'
        },
        {
          label: '角色描述',
          prop: 'description'
        },
        // {
        //   label: '城市',
        //   prop: 'city'
        // },
        {
          fixed: 'right',
          label: '操作',
          slot: 'options',
          width: '260'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams
      }
      getUserRoleList(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    addRole() {
      this.optType = 'add'
      this.showModal = true
    },
    editPerssion(data) {
      this.unitDetail = data
      this.showEditPermissions = true
    },
    editRole(data) {
      this.optType = 'edit'
      this.unitDetail = data

      this.showModal = true
      this.$nextTick(() => {
        this.roleData.name = data.name
        this.roleData.description = data.description
      })
    },
    cancel() {
      this.showModal = false
      this.$refs.roleForm.resetFields()
    },
    saveRole() {
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.roleData,
            ...this.optType === 'edit' ? {
              id: this.unitDetail.id
            } : {}
          }
          this.loading = true
          const fnInstance = this.optType === 'edit' ? updateRole(params) : addUserRole(params)
          fnInstance.then(res => {
            this.loading = false
            if (res.code === '0001') {
              this.$message.success('添加成功')
              this.showModal = false
              this.$refs.roleForm.resetFields()
              this.getDataList()
            } else {
              this.$message.error(res.msg || '添加失败')
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.unitDetail = data
      this.showAddFileModal = true
    },
    delRole(data) {
      this.$confirm('确定要删除该角色吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = data
        deleteUserRole({
          roleId: id
        }).then(res => {
          const { code, msg } = res
          if (code === '0001') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getDataList()
          } else {
            this.$message({
              type: 'error',
              message: msg || '删除失败!'
            })
          }
        })
      }).catch(() => {
      })
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {

    }

  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail{
  height: calc(100% - 50px);
}
</style>
